<template>
  <div class="login">
    <div class="container">
      <img src="../assets/avatar.jpg" alt="" class="avatar">
      <el-form :model="user" :rules="rules" ref="loginForm"  class="demo-ruleForm">
        <el-form-item  prop="username">
          <el-input v-model="user.username"  placeholder='请输入用户名'  prefix-icon="icon-user"
          @focus="clearRules('username')"></el-input>
        </el-form-item>
        <el-form-item  prop="password">
          <el-input v-model="user.password" placeholder='请输入密码' type="password" prefix-icon="icon-key"
          @focus="clearRules('password')"></el-input>
      </el-form-item>
      <el-button type="primary" class="login-btn" @click="userLogin">登录</el-button>
    </el-form>
    </div>
  </div>
</template>

<script>
import {login} from '@/apis/user.js'
export default {
  data () {
    return {
      user:{
        username:'10086',
        password:'123'
      },
      // 添加数据的验证规则
      rules:{
        username:[
          // required要求必填
          { required:true,message:'请输入用户名',trigger:'blur' },
          { pattern:/^1\d{4}$|^1\d{10}$/,message:'请输入合法手机号',trigger:'blur' }
        ],
        password:[
          { required:true,message:'请输入密码',trigger:'blur' },
        ]
      }
    }
  },
  methods: {
    // 清除校验规则
    clearRules(aa){
      this.$refs.loginForm.clearValidate(aa)
    },
    userLogin(){
      this.$refs.loginForm.validate(async valid =>{
        console.log(valid);
        let res = await login(this.user)
        console.log(res);
        if(valid){
          let res = await login(this.user)
          console.log(res);
          if(res.data.message == '登录成功'){
            localStorage.setItem('hm_toutiao_houtai',JSON.stringify(res.data.data))
            // 跳转
            this.$router.push({path:'/index'})
            // 成功提示
            this.$message({
            message: '登录成功',
            type: 'success'
            })
          }else{
            this.$message({
            message: res.data.message,
            type: 'error'
            })
          }
        }else{
          this.$message({
          message: res.data.message,
          type: 'error'
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #2f4050;

  .container {
    position: absolute;
    left: 0;
    right: 0;
    width: 400px;
    padding: 0px 40px 15px 40px;
    margin: 200px auto;
    background: white;
    .avatar {
      position: relative;
      left: 50%;
      width: 120px;
      height: 120px;
      margin-left: -60px;
      margin-top: -60px;
      box-sizing: border-box;
      border-radius: 50%;
      border: 10px solid #fff;
      box-shadow: 0 1px 5px #ccc;
      overflow: hidden;
    }
    .login-btn {
      width: 100%;
    }
  }
}
</style>